import React from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import TweenOne from 'components/motionsRender/components/tweenOne';

@observer
export default class Motions extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);
  }

  render() {
    const { mod } = this.props;
    const { motionToPlay } = mod.parent;
    // console.log('motionToPlay', motionToPlay);

    if (motionToPlay && motionToPlay.effectElement.indexOf(mod.id) > -1) {
      const props = {
        mod,
        elementId: mod.id,
        motion: motionToPlay,
        rotates: {
          rotate: mod.rotate || 0,
          rotateX: mod.rotateX || 0,
          rotateY: mod.rotateY || 0,
          skewX: mod.skewX || 0,
          skewY: mod.skewY || 0,
        },
        onMotionEnd: e => {
          console.log('动效播放完成！', e);
        }
      };
      return (
        <TweenOne {...props}>
          {this.props.children}
        </TweenOne>
      );
    }

    const props = {
      style: {
        position: 'absolute',
        ...mod.style,
      }
    };
    return (
      <div {...props}>
        {this.props.children}
      </div>
    );
  }
}
